<!-- experiment-frontend-src-views-Teacher-TeacherGradeView.vue -->
<template>
  <div class="grade-management">
    <h2>学生成绩管理</h2>

    <div class="filter-container">
      <el-input
          v-model="searchText"
          placeholder="输入学生姓名/班级/实验名称搜索"
          clearable
          style="width: 300px; margin-right: 15px;"
      />
      <el-select
          v-model="selectedClass"
          placeholder="筛选班级"
          clearable
          style="width: 200px; margin-right: 15px;"
      >
        <el-option
            v-for="cls in classOptions"
            :key="cls"
            :label="cls"
            :value="cls"
        />
      </el-select>
    </div>

    <el-table
        :data="filteredGrades"
        border
        stripe
        style="width: 100%; margin-top: 20px;"
    >
      <el-table-column prop="student" label="姓名" width="120" sortable />
      <el-table-column prop="class" label="班级" width="150" sortable />
      <el-table-column prop="experimentName" label="实验名称" sortable />
      <el-table-column prop="experimentScore" label="实验分数" width="120" sortable/>
      <el-table-column prop="score" label="报告评价" width="120" sortable>
        <template #default="{ row }">
          <span :style="{ color: row.score >= 60 ? '#67C23A' : '#F56C6C' }">
            {{ row.score || '待评价' }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)" effect="dark">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="submitTime" label="提交时间" width="180" sortable />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button
              type="primary"
              size="small"
              @click="handleGrade(row)"
              v-if="row.status === '待批改'"
          >
            批改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 测试数据
const allGrades = ref([
  {
    id: 1,
    student: '张三',
    class: '计科1班',
    experimentName: '网络拓扑实验一',
    experimentScore: 85,
    score: 85,
    status: '已完成',
    submitTime: '2023-08-01 14:30'
  },
  {
    id: 2,
    student: '李四',
    class: '软件2班',
    experimentName: '网络拓扑实验一',
    experimentScore: 80,
    score: null,
    status: '待批改',
    submitTime: '2023-08-02 09:15'
  },
  {
    id: 3,
    student: '王五',
    class: '网安1班',
    experimentName: '网络拓扑实验一',
    experimentScore: 78,
    score: 78,
    status: '已完成',
    submitTime: '2023-08-03 16:45'
  }
])

// 筛选条件
const searchText = ref('')
const selectedClass = ref('')

// 班级选项
const classOptions = computed(() => {
  return [...new Set(allGrades.value.map(item => item.class))]
})

// 过滤逻辑
const filteredGrades = computed(() => {
  return allGrades.value.filter(item => {
    const matchSearch = [item.student, item.class, item.experimentName].some(
        field => field.toLowerCase().includes(searchText.value.toLowerCase())
    )
    const matchClass = selectedClass.value ? item.class === selectedClass.value : true
    return matchSearch && matchClass
  })
})

// 状态标签样式
const statusTagType = (status) => {
  return status === '已完成' ? 'success' : 'warning'
}

// 批改操作
const handleGrade = (row) => {
  // 这里可以添加评分弹窗逻辑
  console.log('开始批改：', row)
}
</script>

<style scoped>
.grade-management {
  padding: 20px;
}

.filter-container {
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.el-table {
  margin-top: 20px;
}

::v-deep .el-table__row--striped {
  background-color: #fafafa;
}
</style>